<script setup lang="ts">
const handleClose = () => {
  window.windowApi.close()
}
const handleApply = () => {
  // 处理应用逻辑
  console.log('应用更改')
}
</script>

<template>
  <div class="container">
    <h2>系统设置</h2>
    <p>版本：1.0.0</p>
    <p>这是一个使用 Electron + Vue3 开发的应用</p>

    <div class="divider"></div>
    <div class="button-group">
      <el-button size="small" @click="handleApply">应用</el-button>
      <el-button size="small" @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  padding: 8px;
  position: relative;
  height: 100vh;
}

.divider {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #dcdfe6;
  margin: 0 10px;
}

.button-group {
  position: absolute;
  bottom: 25px;
  right: 10px;
  display: flex;
}
</style>
